﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0055)http://demo.jb51.net/js/2015/jquery-select-move-delete/ -->
<HTML><HEAD><META content="IE=5.0000" http-equiv="X-UA-Compatible">
 
<META http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<TITLE>select选择框内容左右移动添加删除代码</TITLE> 
<STYLE type="text/css">*{margin:0;padding:0;list-style-type:none;outline:none;}a,img{border:0;}body{font:12px/normal "microsoft yahei";}.selectbox{width:500px;height:220px;margin:100px auto;}.selectbox div{float:left;}.selectbox .select-bar{padding:0 20px;}.selectbox .select-bar select{width:150px;height:200px;border:1px #A0A0A4 solid;padding:4px;font-size:14px;font-family:"microsoft yahei";}.btn-bar{}.btn-bar p{margin-top:16px;}.btn-bar p .btn{width:50px;height:30px;cursor:pointer;font-family:simsun;font-size:14px;}</STYLE>
 
<SCRIPT src="js/jquery-1.8.3.min.js" type="text/javascript"></SCRIPT>
 
<SCRIPT type="text/javascript">
$(function(){	
	//移到右边
	$('#add').click(function(){
		//先判断是否有选中
		if(!$("#select1 option").is(":selected")){			
			alert("请选择需要移动的选项")
		}
		//获取选中的选项，删除并追加给对方
		else{
			$('#select1 option:selected').appendTo('#select2');
		}	
	});
	
	//移到左边
	$('#remove').click(function(){
		//先判断是否有选中
		if(!$("#select2 option").is(":selected")){			
			alert("请选择需要移动的选项")
		}
		else{
			$('#select2 option:selected').appendTo('#select1');
		}
	});
	
	//全部移到右边
	$('#add_all').click(function(){
		//获取全部的选项,删除并追加给对方
		$('#select1 option').appendTo('#select2');
	});
	
	//全部移到左边
	$('#remove_all').click(function(){
		$('#select2 option').appendTo('#select1');
	});
	
	//双击选项
	$('#select1').dblclick(function(){ //绑定双击事件
		//获取全部的选项,删除并追加给对方
		$("option:selected",this).appendTo('#select2'); //追加给对方
	});
	
	//双击选项
	$('#select2').dblclick(function(){
		$("option:selected",this).appendTo('#select1');
	});
	
});
</SCRIPT>
 
<META name="GENERATOR" content="MSHTML 11.00.10586.35"></HEAD> 
<BODY>
<DIV class="selectbox">
<DIV class="select-bar"><SELECT id="select1" multiple="multiple"><OPTION 
  value="超级管理员">超级管理员</OPTION> <OPTION value="普通管理员">普通管理员</OPTION> <OPTION 
  value="信息发布员">信息发布员</OPTION> <OPTION value="财务管理员">财务管理员</OPTION> <OPTION 
  value="产品管理员">产品管理员</OPTION> <OPTION value="资源管理员">资源管理员</OPTION> <OPTION 
  value="系统管理员">系统管理员</OPTION> <OPTION value="超级管理员">超级管理员</OPTION> <OPTION 
  value="普通管理员">普通管理员</OPTION> <OPTION value="信息发布员">信息发布员</OPTION> <OPTION 
  value="财务管理员">财务管理员</OPTION> <OPTION value="产品管理员">产品管理员</OPTION> <OPTION 
  value="资源管理员">资源管理员</OPTION> </SELECT> </DIV>
<DIV class="btn-bar">
<P><SPAN 
id="add"><INPUT title="移动选择项到右侧" class="btn" type="button" value=">"></SPAN></P>
<P><SPAN 
id="add_all"><INPUT title="全部移到右侧" class="btn" type="button" value=">>"></SPAN></P>
<P><SPAN 
id="remove"><INPUT title="移动选择项到左侧" class="btn" type="button" value="<"></SPAN></P>
<P><SPAN id="remove_all"><INPUT title="全部移到左侧" class="btn" type="button" value="<<"></SPAN></P></DIV>
<DIV class="select-bar"><SELECT id="select2" multiple="multiple"></SELECT> 
</DIV></DIV>
<DIV style="text-align: center;"></DIV></BODY></HTML>
